<template>
  <!--dialog-form对话框表单组件-->
  <div class="def-dialog-form">
    <def-dialog ref="dialogRef" :fullscreen="fullscreen" v-bind="dialog">
      <template #default>
        <slot>
          <!--          <el-button type="success" @click="open"
            >这里是打开对话框操作</el-button
          >-->
        </slot>
      </template>
      <template #header>
        <div class="dialog-header">
          <div class="header-left">表单 {{ type === 'add' ? ' 新增' : ' 修改' }}</div>
          <div class="header-right">
            <span @click="handleFullscreen">{{ !fullscreen ? '全屏' : '退出全屏' }}</span>
          </div>
        </div>
      </template>
      <template #content>
        <div class="content" style="padding: 0 30px">
          <def-form
            ref="formRef"
            v-bind="formAttrs"
            :formOptions="list"
            :formData="data"
            :hiddenBtn="true"
            @confirm="onConfirm"
            @cancel="close" />
        </div>
      </template>
      <template #footer>
        <def-button type="primary" @click="handleDialogForm">
          <def-icon icon="CircleCheck" />
          <span class="ml-05">确认</span>
        </def-button>
        <def-button @click="handleDialogClose">
          <def-icon icon="CircleClose" />
          <span class="ml-05">取消</span>
        </def-button>
      </template>
    </def-dialog>
  </div>
</template>

<script lang="ts" setup>
import { PropType, reactive, ref } from 'vue'
import { IElDialogProps } from '@/base-ui/dialog/index.vue'
import { IElForm, IElFormItem, IForm } from '@/base-ui/form/types'

const props = defineProps({
  // dialog对话框配置
  dialog: {
    type: Object as PropType<IElDialogProps>,
    default: () => ({})
  },
  // form表单配置
  form: {
    type: Object as PropType<IElForm>,
    default: () => ({})
  },
  // formItem表单项配置
  list: {
    type: Array as PropType<IElFormItem[]>,
    required: true
  },
  // 表单回显数据
  data: {
    type: Object,
    default: () => null
  },
  // dialog 类型
  type: {
    type: String as PropType<'add' | 'edit'>,
    default: 'add'
  }
})
const emits = defineEmits(['confirm', 'toggleFullscreen'])

// form表单默认配置（可有可无）
const formAttrs: IForm = reactive({
  inline: false,
  labelWidth: 120,
  labelSuffix: ':',
  layout: {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 12,
    xl: 12,
    gutter: 50
  },
  ...props.form
})

/* 逻辑处理 */
const formRef = ref()
const handleDialogForm = () => {
  formRef.value?.exposeConfirm()
}
const handleDialogClose = () => {
  formRef.value?.exposeCancel()
}
const fullscreen = ref(false)
const handleFullscreen = () => {
  fullscreen.value = !fullscreen.value
  if (fullscreen.value) {
    formAttrs.layout!.lg = 8
    formAttrs.layout!.xl = 6
  } else {
    formAttrs.layout!.lg = 12
    formAttrs.layout!.xl = 12
  }
}

const dialogRef = ref()
const onConfirm = (model: any) => {
  emits('confirm', model)
  dialogRef.value?.close()
}
const close = () => {
  dialogRef.value?.close()
}
const open = () => {
  dialogRef.value?.open()
}
defineExpose({
  open,
  close
})
</script>

<style scoped lang="scss">
.def-dialog-form {
  .dialog-header {
    font-size: 18px;
    @include flexRowSb;
    .header-right {
      padding-right: 20px;
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
  :deep(.def-dialog) {
    .el-dialog__body {
      padding-left: 0;
    }
  }
  :deep(.el-scrollbar) {
    .el-scrollbar__view {
      height: 100%;
    }
  }
}
</style>
